// 导入axios
import axios from 'axios'
import { Message } from 'element-ui'
import store from '@/store'
// 创建axios实例
const service = axios.create({
  // 问题1：请求时，如何运行这串代码
  // 解决1：当在本地发起请求时，查询环境，会将本地的localhost:8888/与env_dev文件进行拼接，
  //        得到的请求路径为：http://localhost:8888/+process.env.VUE_APP_BASE_API
  //        再将请求路径进行拼接得到http://localhost:8888/api/请求路径
  //        通过反向代理后，发送的最终请求路径为http://ihrm-java.itheima.net/api/请求路径
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000
})

// 请求拦截器
service.interceptors.request.use(config => {
  if (store.getters.token) {
    config.headers['Authorization'] = `Bearer ${store.getters.token}`
  }
  return config
}, error => {
  Message.error(error.message)
  return Promise.reject(error)
})

// 响应拦截器
// 问题2：每次响应获得的数据都是完整的数据，为了减轻后续的数据处理，如何做
// 解决2：通过在响应拦截器中，拦截获得的数据，进行判断、处理将真正需要的数据传递下去（减轻获得数据后的处理步骤）
service.interceptors.response.use(response => {
  // 数据返回默认加了一层data
  const { success, message, data } = response.data
  // 问题3：某种情况下响应失败，并且没有状态码（状态码是http返回的），如何进行判断是否响应成功
  // 解决3：根据接口设计，通过success的状态来判断响应成功或失败，成功则true，失败false

  // 问题4：为什么有时候return data，有时候需要return promise.reject
  // 解决4：return data时走的是.then 当出现错误需要捕获错误.catch，此时手动需要执行promise的第二个参数reject错误处理
  if (success) {
    // 判断有没有success有则返回data
    return data
  } else {
    // 没有就提示错误并返回一个promise错误
    // 这里采用的是element中的错误提示组件，并将创建一个错误信息传递给promise
    Message.error(message)
    return Promise.reject(new Error(message))
  }
}, error => {
  Message.error(error.message) // 提示错误信息
  return Promise.reject(error) // 返回一个promise的错误。直接进入catch
})

export default service
